<template>
    <view>
        <template v-if="isLoad">
            <view class="flex flex-direction" :style="{ height }">
                <azNavbar navtype="default" customClass="bg-white">
                    <template v-slot:header>
                        <view class="header" style="width: 100%">
                            <view class="flex align-center padding-lr-sm" style="height: 100%; width: 100%">
                                <view style="width: 100%">
                                    <searchInput v-model="keyword" />
                                </view>
                            </view>
                        </view>
                    </template>
                </azNavbar>
                <goodsScrollCate v-model="selectIndex1" v-model:categoryList2="categoryList2" @change="selectChange" />
                <view class="scroll-wrap" style="flex: 1">
                    <scroll-view scroll-y :scroll-into-view="scrollEl2" scroll-with-animation class="scroll-left bg-white">
                        <view
                            v-for="(item, index) in categoryList2"
                            :id="`scroll2Item${index}`"
                            :key="item.catid"
                            class="padding-lr-sm padding-tb-base text-sm"
                            :class="selectIndex2 == index ? 'bg-main' : ''"
                            @click="hanlderSelect2(index)"
                            >{{ item.catname }}</view
                        >
                    </scroll-view>
                    <scroll-view scroll-y class="scroll-right bg-white">
                        <goodsCateList :list="list" />
                    </scroll-view>
                </view>
            </view>
        </template>
        <loading v-else></loading>
    </view>
</template>

<script lang="ts" setup>
import azNavbar from "@/components/common/az-navbar.vue";
import loading from "@/components/common/loading.vue";
import searchInput from "@/components/input/search-input.vue";
import goodsScrollCate from "@/components/goods/goods-scroll-cate.vue";
import goodsCateList from "@/components/goods/goods-cate-list.vue";

import { ref } from "vue";
import { useGetUserinfo } from "@/hooks/getuserinfo";
import { onShow } from "@dcloudio/uni-app";
import { useSettingStore } from "@/store/module/setting";
import { useMemberStore } from "@/store/module/member";
import { getProductListApi } from "@/api/goods";
import { useList } from "@/hooks/uselist";

const settingStore = useSettingStore();
const memberStore = useMemberStore();
const isLoad = ref<boolean>(false);
const keyword = ref<string | undefined>(undefined);
const selectIndex1 = ref<number>(0); // 一级分类索引
const selectIndex2 = ref<number>(0); // 二级分类索引
const categoryList2 = ref<any[]>([]); // 二级分类列表
const scrollEl2 = ref<string>(""); // 二级滚动索引

// 商品高度
let height: string = "";

// #ifdef H5
height = "calc(100vh - 50px)";
// #endif

// #ifndef H5
height = "100vh";
// #endif

// 选择二级索引
const hanlderSelect2 = (index: number) => {
    selectIndex2.value = index;
    scrollEl2.value = `scroll2Item${selectIndex2.value}`;
    reset();
};

// 获取商品列表
const { list, resetList, setQueryParams } = useList(getProductListApi, {
    view_username: memberStore.userInfo.username || undefined,
    catid: categoryList2.value.length > 0 ? categoryList2.value[selectIndex2.value].arrchildid : undefined,
    keyword: keyword.value
});

const selectChange = () => {
    selectIndex2.value = 0;
    reset();
};

// 重新发送请求
const reset = () => {
    setQueryParams({
        view_username: memberStore.userInfo.username || undefined,
        catid: categoryList2.value.length > 0 ? categoryList2.value[selectIndex2.value].arrchildid : undefined,
        keyword: keyword.value
    });
    resetList();
};

onShow(async () => {
    await Promise.all([useGetUserinfo(), settingStore.getAllCategoryList(), resetList()]);
    isLoad.value = true;
});
</script>

<style lang="scss" scoped>
.scroll-wrap {
    padding-bottom: calc(100rpx + env(safe-area-inset-bottom) / 2);
    position: relative;
    display: flex;
    .scroll-left {
        position: absolute;
        width: 180rpx !important;
        left: 0;
        height: 100%;
        border-right: 1px solid #eee;
    }

    .scroll-right {
        position: absolute;
        width: calc(100% - 180rpx) !important;
        right: 0;
        height: 100%;
    }
}
</style>
